import React, { Component } from "react";
import { Select, Tag, Input, Button, Divider, Form, message, Modal } from "antd";
import { getTimeBucket } from "../../utils/index";
import "./TagSelect.less";

const { CheckableTag } = Tag;
const { Option } = Select;
const { TextArea } = Input;
const cateTagsFromServer = ["文章", "图集", "视频", "直播"];
const timeTagsFromServer = ["全部", "半小时内", "一小时内", "三小时内", "十二小时内", "一天内", "三天内", "一周内", "一月内"];
@Form.create()
class TagSelect extends Component {
  constructor(props) {
    super(props);
    this.state = {
      categoryId: 1,
      searchKeyword: "",
      categoryName: "文章",
      cateSelectedTags: ["文章"],
      timeSelectedTags: ["全部"],
      allDeleteExplainVisible: false, //批量删除的变量
      allDeleteNote: "" //批量删除的说明
    };
  }
  pageSizeChange = (current, size) => {
    this.setState({
      pageSize: size
    });
  };
  // 类别选择变化事件
  cateHandleChange = (tag, checked) => {
    let categoryId = "";
    if (checked) {
      let nextSelectedTags = checked ? [tag] : [];
      switch (tag) {
        case "文章":
          categoryId = 1;
          break;
        case "图集":
          categoryId = 2;
          break;
        case "视频":
          categoryId = 4;
          break;
        case "音频":
          categoryId = 42;
          break;
        case "直播":
          categoryId = 6;
          break;
        default:
          break;
      }

      this.setState({ cateSelectedTags: nextSelectedTags });
      const data = {
        category_id: categoryId,
        category_name: tag
      };
      this.props.getcategoryChange(data);
    }
  };
  // 时间选择变化事件
  timeHandleChange = (tag, checked) => {
    let nextSelectedTags = checked ? [tag] : [];
    let selectedTime = "";
    if (checked) {
      switch (nextSelectedTags[0]) {
        case "全部":
          selectedTime = "1970-01-01 00:00:00";
          break;
        case "半小时内":
          selectedTime = getTimeBucket("halfhour");
          break;
        case "一小时内":
          selectedTime = getTimeBucket("oneHour");
          break;
        case "三小时内":
          selectedTime = getTimeBucket("threeHours");
          break;
        case "十二小时内":
          selectedTime = getTimeBucket("twelveHours");
          break;
        case "一天内":
          selectedTime = getTimeBucket("day");
          break;
        case "三天内":
          selectedTime = getTimeBucket("Triduum");
          break;
        case "一周内":
          selectedTime = getTimeBucket("oneWeek");
          break;
        case "一月内":
          selectedTime = getTimeBucket("oneMonth");
          break;
        default:
          break;
      }
      this.setState({ timeSelectedTags: nextSelectedTags });
      this.props.getSelectedTimeChange(selectedTime, nextSelectedTags[0]);
    }
  };
  // 搜索模块下拉选择框
  selectChange = val => {
    let categoryName = "文章";
    switch (val) {
      case 1:
        categoryName = "文章";
        break;
      case 2:
        categoryName = "图集";
        break;
      case 4:
        categoryName = "视频";
        break;
      case 6:
        categoryName = "直播";
        break;
      case 42:
        categoryName = "音频";
        break;
      default:
        break;
    }
    this.setState({
      categoryId: val,
      categoryName
    });
  };
  // 输入框内容变化（失去焦点）
  searchInputChange = e => {
    this.setState({
      searchKeyword: e.target.value
    });
  };
  // 搜索
  handleSeach = type => {
    const { categoryId, searchKeyword, categoryName } = this.state;
    // if (searchKeyword.trim() === "") {
    //   return message.warning("搜索内容不能为空");
    // }
    let searchType = 1;
    searchType = type === "one" ? 1 : 2;
    const data = {
      category_id: categoryId,
      searchKeyword: searchKeyword,
      category_name: categoryName,
      searchType
    };
    this.props.handleSeachButton(data);
  };
  handleReset = () => {
    this.setState({
      searchKeyword: "",
      categoryId: 1
    });
    const { categoryId, categoryName } = this.state;
    const data = {
      category_id: categoryId,
      searchKeyword: "",
      category_name: categoryName
    };
    this.props.handleSeachButton(data);
  };
  // 显示批量删除对话框
  showModal = e => {
    this.setState({
      allDeleteExplainVisible: true
    });
  };
  // 点击删稿说明对话框确定
  allDeleteExplainModalOk = () => {
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.setState({
          allDeleteExplainVisible: false
        });
        this.props.deleteAllContent(values.allDeleteNote);
        this.props.form.resetFields();
      }
    });
  };
  allDeleteExplainModalCancle = () => {
    this.props.form.resetFields();
    this.setState({
      allDeleteExplainVisible: false
    });
  };
  render() {
    const { timeSelectedTags, searchKeyword } = this.state;
    const { getFieldDecorator } = this.props.form;
    return (
      <div className="tag-select">
        <div key="category">
          <h5 style={{ marginRight: 8, display: "inline" }}>类型:</h5>
          {cateTagsFromServer.map(tag => (
            <CheckableTag key={tag} checked={this.props.currentCategory.indexOf(tag) > -1} onChange={checked => this.cateHandleChange(tag, checked)}>
              {tag}
            </CheckableTag>
          ))}
        </div>
        <Divider dashed style={{ marginTop: 12, marginBottom: 12, width: "70%", minWidth: "70%" }} />
        <div key="times">
          <h5 style={{ marginRight: 8, display: "inline" }}>时间:</h5>
          {timeTagsFromServer.map(tag => (
            <CheckableTag key={tag} checked={this.props.currentTimer.indexOf(tag) > -1} onChange={checked => this.timeHandleChange(tag, checked)}>
              {tag}
            </CheckableTag>
          ))}
        </div>
        <Divider dashed style={{ marginTop: 12, marginBottom: 12, width: "70%", minWidth: "70%" }} />
        {/* 搜索模块 */}
        <div className="searchModel">
          <div className="searchModel-left">
            <div className="searchModel-left-text">文章搜索：</div>
            {/* 下拉选择框 */}
            <div className="searchModel-left-select">
              <Select defaultValue={this.state.categoryId} value={this.state.categoryId} style={{ width: 120 }} onChange={this.selectChange}>
                <Option value={1}>文章</Option>
                <Option value={2}>图集</Option>
                <Option value={4}>视频</Option>
                {/* <Option value={42}>音频</Option> */}
              </Select>
            </div>
            {/* 输入框 */}
            <div className="searchModel-left-input">
              <Input value={searchKeyword} onChange={e => this.searchInputChange(e)} style={{ width: "100%" }} placeholder="请输入文章标题内容" />
            </div>
            <div className="searchModel-left-button">
              <Button type="primary" onClick={this.handleSeach.bind(this, "one")}>
                搜索
              </Button>
              {/* <Button type="primary" onClick={this.handleSeach.bind(this, "two")}>
                精准搜索
              </Button> */}
              <Button onClick={this.handleReset}>重置</Button>
            </div>
          </div>
          <div className="searchModel-right">{this.props.showAllDelVariable ? <Button onClick={this.showModal}>批量删除</Button> : null}</div>
        </div>
        <Modal title="删稿说明" visible={this.state.allDeleteExplainVisible} okText="确定" cancelText="取消" onOk={this.allDeleteExplainModalOk} onCancel={this.allDeleteExplainModalCancle}>
          <Form onSubmit={this.handleSubmit} className="login-form">
            <Form.Item>
              {getFieldDecorator("allDeleteNote", {
                rules: [
                  { required: true, message: "请输入推稿说明!" },
                  { whitespace: true, message: "不能输入空字符!" },
                  { max: 60, message: "不能大于60个字符" }
                ]
              })(<TextArea placeholder="请输入60字以内的说明。。。" allowClear rows={6} />)}
            </Form.Item>
          </Form>
        </Modal>
      </div>
    );
  }
}

export default TagSelect;
